<!--已废弃 ，使用login.html-->
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item::placeholder {
            text-transform: uppercase;
        }
        /*.con_select{*/
        /*    text-align: start;*/
        /*    margin-top: 20px;*/
        /*    margin-left: 10px;*/
        /*    !*margin-right: 40px;*!*/
        /*    font-size: 14px;*/
        /*    color: #abc1ee;*/
        /*}*/
        .con_select {
            display: flex;
            flex-direction: row;
            justify-content: center;
            text-align: center;
            font-size: 14px;
            color: #abc1ee;
        }

        .con_select input[type="radio"] {
            margin: 0 10px;
        }



        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #000;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
        /*.login-type {*/
        /*    text-align: center;*/
        /*    margin-top: 20px;*/
        /*    font-size: 14px;*/
        /*    color: #abc1ee;*/
        /*}*/
    </style>
</head>
<body>

<div class="container">
    <div class="login-wrapper">
        <div class="header">登录</div>
        <div class="form-wrapper">
            <form id="login-form">
                <input type="text" name="username" placeholder="用户名/手机号" class="input-item" id="username-input" required>
                <input type="password" name="password" placeholder="密码" class="input-item" id="password-input" required>
                <input type="submit" class="btn"  id="login-btn" value="登录">
            </form>
        </div>
<!--        <div class="login-type">-->
<!--            <a href="#">管理员登录</a> | <a href="#">用户登录</a>-->
<!--        </div>-->
        <div class="con_select">
            <input type="radio"  name="t1" value="用户" />用户
            <input type="radio"  name="t1" value="管理员" />管理员
        </div>
        <div class="msg">
            Don't have account?
            <a href="signUp.html">Sign up</a>
        </div>

    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>


    const usernameInput = document.querySelector('#username-input');
    const passwordInput = document.querySelector('#password-input');

    const loginForm = document.querySelector('#login-form');


    loginForm.addEventListener('submit',  async function (e) {
        e.preventDefault();
        // 获取输入的用户名和密码
        var username = usernameInput.value;
        var password = passwordInput.value;

        var selectedOption = document.querySelector('input[name="t1"]:checked');
        if (!selectedOption) {
            alert("请选择登录类型");
            return;
        }

        var loginUrl = '';

        if (selectedOption.value === '管理员') {
            loginUrl = './api/login/admin';
        } else {
            loginUrl = './api/login/customer';
        }

        try {
            const response = await axios.post(loginUrl, { username, password });
            alert('登录成功！');
            window.location.href = 'home.html';
        } catch (error) {
            alert('登录失败！');
        }
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>


    const usernameInput = document.querySelector('#username-input');
    const passwordInput = document.querySelector('#password-input');

    const loginForm = document.querySelector('#login-form');


    loginForm.addEventListener('submit',  async function (e) {
        e.preventDefault();
        // 获取输入的用户名和密码
        var username = usernameInput.value;
        var password = passwordInput.value;

        var selectedOption = document.querySelector('input[name="t1"]:checked');
        if (!selectedOption) {
            alert("请选择登录类型");
            return;
        }

        var loginUrl = '';

        if (selectedOption.value === '管理员') {
            loginUrl = './api/login/admin';
        } else {
            loginUrl = './api/login/customer';
        }

        try {
            const response = await axios.post(loginUrl, { username, password });
            alert('登录成功！');
            window.location.href = 'home.html';
        } catch (error) {
            alert('登录失败！');
        }
    });
</script>

</body>
</html>


